<template>
  <div id="emsTable" :class="{'ems-padding' : isColor}">
    <div class="emsTable-head" :class="{'ems-table-bg' : isColor}">
      <p>排 名</p>
      <p>类 型</p>
      <p>总 量</p>
      <p>占 比</p>
    </div>
    <div class="emsTable-container emsTable">
      <div class="emsTable-section" :class="{'ems-even' : isColor, 'height-46' : isColor}" v-for="(item, index) in tableList" :key="index">
        <p><Icon type="md-flag" size="24" :color="colorList[index]"/>{{item.rank}}</p>
        <p>{{item.name}}</p>
        <p>{{item.value === '0.00' ? '--' : item.value}}</p>
        <p>{{item.proport}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    // 组件的名称
    name: 'emsTable',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {
      // 数据  的 数组
      tableList: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 表格 样式 是否有效
      isColor: {
        type: Boolean,
        default: false
      },
      // 排名 的 样式 数组
      colorList: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    // 数据绑定
    data () {
      return {
      }
    },
    // 组件
    components: {},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {},
    // 计算属性
    computed: {},
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
    }
  }
</script>

<style lang="scss" scoped='scoped'>
  .emsTable-section {
    display: flex;
    text-align: center;
    font-size: 14px;
    height: 40px;
    line-height: 40px;

    p {
      flex: 1;
      font-size: 14px;
    }
  }
  .height-46 {
    height: 46px;
    line-height: 46px;
  }
  .emsTable-head {
    display: flex;
    flex: 0 0 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 16px;

    p {
      flex: 1;
      line-height: 40px;
    }
  }
  .ems-padding {
    padding: 25px 0 0 0;
  }
  @media screen and (min-width: 1921px) {
    #emsTable {
      height: 398px !important;
    }
  }
  #emsTable {
    @media screen and (min-width: 1921px) {
      .emsTable-section {
        height: 58px;
        line-height: 58px;
      }
      .emsTable-head {
        height: 57px;
        line-height: 57px;
      }
      .height-46 {
        height: 64px;
        line-height: 64px;
      }
    }
    flex: 1;
    display: flex;
    flex-direction: column;
    /*height: 77.25%;*/
    height: 280px;
    .ems-table-bg {
      /*background-color: rgba(20, 63, 179, 1);*/
      background-color: rgba(19, 42, 132, 0.34);
    }

    .emsTable-container {
      overflow: auto;
      overflow-x: hidden;

      div.ems-even:nth-child(even) {
        /*background-color: rgba(20, 63, 179, 1);*/
        background-color: rgba(19, 42, 132, 0.34);
      }
    }
  }
</style>
